<template>
    <div>
        <el-card>
            <div slot="header" class="clearfix">
                <span>排行榜</span>
            </div>
            <el-row v-for="(user, index) in topTen" :key="user.userCode" class="user-item">
                <el-col :span="4">
                    <el-avatar :src="user.profilePhoto" size="large"></el-avatar>
                </el-col>
                <el-col :span="14">
                    <span class="username">{{ user.username }}</span>
                </el-col>
                <el-col :span="6">
                    <span class="score">{{ user.totalScore }} 分</span>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    export default {
        props: {
            userList: {
                type: String,
            }
        },
        data() {
            return {
                users: [
                    {userCode: 1, username: 'User1', profilePhoto: 'https://i.pravatar.cc/150?img=1', totalScore: 100},
                    {userCode: 2, username: 'User2', profilePhoto: 'https://i.pravatar.cc/150?img=2', totalScore: 90},
                    {userCode: 3, username: 'User3', profilePhoto: 'https://i.pravatar.cc/150?img=3', totalScore: 80},
                    {userCode: 4, username: 'User4', profilePhoto: 'https://i.pravatar.cc/150?img=4', totalScore: 70},
                    {userCode: 5, username: 'User5', profilePhoto: 'https://i.pravatar.cc/150?img=5', totalScore: 60},
                    {userCode: 6, username: 'User6', profilePhoto: 'https://i.pravatar.cc/150?img=6', totalScore: 50},
                    {userCode: 7, username: 'User7', profilePhoto: 'https://i.pravatar.cc/150?img=7', totalScore: 40},
                    {userCode: 8, username: 'User8', profilePhoto: 'https://i.pravatar.cc/150?img=8', totalScore: 30},
                    {userCode: 9, username: 'User9', profilePhoto: 'https://i.pravatar.cc/150?img=9', totalScore: 20},
                    {userCode: 10, username: 'User10', profilePhoto: 'https://i.pravatar.cc/150?img=10', totalScore: 10},
                    {userCode: 11, username: 'User11', profilePhoto: 'https://i.pravatar.cc/150?img=11', totalScore: 5},
                ],
            };
        },
        watch: {
            userList(val) {
                this.sortList();
            }
        },
        computed: {
            topTen() {
                return this.users.slice(0, 10);
            },
        },
        methods: {
            sortList(){
                this.$axios.get('/user/getSortList').then(res => {
                    if (res.data.code === 200) {
                        let data = res.data.data;

                        this.users = data.records
                    }
                })
            }
        },
        created() {
            this.sortList();
        }
    };
</script>

<style scoped>
    .user-item {
        margin-bottom: 10px;
    }

    .username {
        margin-left: 10px;
    }

    .score {
        float: right;
    }
</style>